<template>

  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="事件内容">
          <el-input placeholder="请输入内容" v-model.trim="searchEventParam.eventContent" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="事件级别">
          <el-select v-model.trim="searchEventParam.eventLevel" placeholder="请选择事件级别" clearable>
            <el-option label="特别重大事件" value="10"></el-option>
            <el-option label="重大事件" value="20"></el-option>
            <el-option label="较大事件" value="30"></el-option>
            <el-option label="一般事件" value="40"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="selectedTimeRange"
            type="daterange"
            placement="bottom-start"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="getEventListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryEvent">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveEvent">新增</el-button>
        </el-form-item>

      </el-form>

    </el-card>


    <!--列表部分-->
    <!--overflow-y: auto; overflow-x 是滚动条显示-->
    <el-card style="margin-top: 10px;">

      <el-timeline style=" max-height:650px; height: 650px; overflow-y: auto; overflow-x: hidden;">
        <el-timeline-item
          v-for="(activity, index) in eventTable.data"
          :key="index"
          placement="top"
          :color="activity.color"
          size="large"
          :icon="activity.icon">

          <el-card>

            <el-row>
              <el-col :span="2">
                <h3>{{getFullDate(activity.eventTime)}}</h3>
              </el-col>
              <el-col :span="18">
                <el-tag :type="gradeTransformationTag(activity.eventLevel)" effect="plain"> {{ activity.grade }} </el-tag>
                <el-tag type="success" effect="plain"> {{ activity.address }} </el-tag>
              </el-col>
              <el-col :span="4">
                <!--<el-button @click="openUpdEvent(activity)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>-->
                <!--<el-button @click="delPsEventByIdTips(activity)" type="danger" size="mini" icon="el-icon-delete" circle></el-button>-->
                <el-button @click="openUpdEvent(activity)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                <el-button @click="delPsEventByIdTips(activity)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <span style="font-size: 12px">{{activity.eventContent}}</span>
              </el-col>
            </el-row>


          </el-card>
        </el-timeline-item>
      </el-timeline>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; "
        background
        layout="total, prev, pager, next, jumper"
        @current-change="eventPageCurrentChange"
        :page-size="eventTable.size"
        :current-page="eventTable.current"
        :pager-count="5"
        :total="eventTable.total">
      </el-pagination>
    </el-card>

    <EventSaveUpd ref="eventSaveUpdRef" @getEventListPage="getEventListPage"></EventSaveUpd>
  </div>

</template>

<script>

  import http from '@/utils/http'
  import EventSaveUpd from './EventSaveUpd.vue'
  import {getFullTime, getFullDate} from "../../utils/utils";


  export default {
    name: "EventList",
    components:{
      EventSaveUpd
    },
    data(){
      return {
        // 查询参数
        searchEventParam: {
          eventContent: null,
          eventLevel: null,
          eventTimeStart: null,
          eventTimeEnd: null,
        },
        // 选中的时间范围
        selectedTimeRange: null,
        // 表格
        eventTable: {
          // 表格数据
          data: [],
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
      }
    },
    // 监听器
    watch: {
      /**
       * 监听到选中时间将数据解析拆分
       */
      selectedTimeRange () {
        if (this.selectedTimeRange == null){
          this.searchEventParam.eventTimeStart = null
          this.searchEventParam.eventTimeEnd = null
        } else {
          this.searchEventParam.eventTimeStart = this.selectedTimeRange[0]
          this.searchEventParam.eventTimeEnd = this.selectedTimeRange[1]
        }
      }
    },
    methods: {
      /**
       * 打开-修改事件信息
       * @param row 当前行数据
       */
      openUpdEvent(row){
        this.$refs.eventSaveUpdRef.openEventPage('upd', row)
      },
      /**
       * 删除提示
       */
      delPsEventByIdTips(row){
        this.$confirm('是否该事件, 删除后无法恢复，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消删除',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.delPsEventById(row)

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 根据主键删除事件
       * @param row 当前行数据
       */
      delPsEventById(row){
        http.post("/event/delPsEventById", {
          id: row.id,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getEventListPage()
          this.$message.success("删除成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 等级的tag颜色转换
       * @param item
       */
      gradeTransformationTag(item){
        if (item === 10){
          return "danger"
        } else if (item === 20){
          return "warning"
        } else if (item === 30){
          return ""
        } else if (item === 40){
          return "success"
        }
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 转换时间戳为指定格式
       * @param item 时间戳
       * @return {string} yyyy-MM-dd
       */
      getFullDate(item){
        return getFullDate(item);
      },
      /**
       * 打开新增的弹出框
       */
      openSaveEvent(){
        this.$refs.eventSaveUpdRef.openEventPage('save', null)
      },
      /**
       * 重置查询条件
       */
      resetQueryEvent(){
        this.selectedTimeRange = null
        this.searchEventParam = {
          eventContent: null,
          eventLevel: null,
          // eventTimeStart: null,
          // eventTimeEnd: null,
        }
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      eventPageCurrentChange(value){
        this.eventTable.current = value
        this.getEventListPage()
      },
      /**
       * 查询前执行
       */
      getEventListPageBefore(){
        this.eventTable.current = 1
        this.getEventListPage()
      },
      /**
       * 根据条件查询事件
       */
      getEventListPage(){
        this.searchEventParam.current = this.eventTable.current
        this.searchEventParam.size = this.eventTable.size

        http.post("/event/getEventListPage", this.searchEventParam).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.eventTable.total = data.total;
          this.eventTable.current = data.current;
          this.eventTable.size = data.size;
          // 处理数据
          this.eventTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getEventListPage()
    }
  }
</script>

<style scoped>

</style>
